<template>
    <div class="asideNav">
        <ul class="nav-b">
            <li class="nav-c" v-for="item in seriesList" :key="item.id">
                <span>{{item.name}}</span>
                <span>></span>
                <ul class="nav-d">
                    <li v-for="it in item.children" :key="it.createdAt" @click="goProOne(it.id)">
                        <img :src="it.s_goods[0].s_goods_photos[0].path" alt="">
                        <span>{{it.name}}</span>
                    </li>
                </ul>
            </li>
            <li class="nav-c" v-for="item in directGoods" :key="item.id">
                <span>{{item.name}}</span>
                <span>></span>
                <!-- <div class="nav-c"> -->
                <ul class="nav-d">
                    <li v-for="it in item.s_goods" :key="it.id" @click="goDetail(it.id)">
                        <img v-if="it.s_goods_photos[0].path" :src="it.s_goods_photos[0].path" alt="">
                        <span>{{it.name}}</span>
                    </li>
                </ul>
                <!-- </div> -->

            </li>
        </ul>
    </div>
</template>

<script>

export default {
    name: 'asidenav',
    data() {
        return {

        };
    },
    props: ['seriesList', 'directGoods'],
    methods: {
        // 跳去详情页
        goDetail(id) {
            localStorage.removeItem('goodId')
            this.$router.push({
                name: "detail",
                params: {
                    id,
                }
            })
        },
        // 跳转到产品页
        goProOne(id) {
            this.$router.push({
                name: "proOne",
                params: {
                    id,
                }
            })
        },
    },
    
}

</script>

<style lang='scss' scoped>
@function vw($w) {
    @return ($w/1349) * 100+vw;
}

.asideNav {
    width: vw(190);
    height: vw(400);
    // padding: vw(18);
    background-color: #fff;
    border: 1px solid rgb(238, 231, 231);
    position: absolute;
    top: vw(180);
    left: vw(50);
    z-index: 99;

    .nav-b {
        height: vw(400);
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        position: relative;

        .nav-c {
            font-size: vw(16);
            display: flex;
            justify-content: space-between;
            cursor: pointer;

            span {
                color: rgb(145, 140, 140);
                font-size: vw(16);
                margin: vw(20);
            }          

            &:hover span:nth-of-type(1) {
                color: #000;
            }

            &:hover span:nth-of-type(2) {
                color: rgb(238, 88, 88);
            }

            .nav-d {
                width: vw(270);
                height: vw(400);
                background-color: #fff;
                overflow: hidden;
                // white-space: nowrap;
                //     text-overflow: ellipsis;
                // white-space:normal;
                position: absolute;
                top: 0;
                left: vw(191);
                display: none;

                li {
                    width: vw(260);
                    height: vw(80);
                    display: flex;
                    align-items: center;
                    
                    img {
                        width: vw(45);
                        height: vw(45);
                        margin-left: vw(18);
                    }

                    span {
                        width: vw(170);
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        font-size: vw(13);
                        &:hover{
                        color: rgb(247, 75, 75);
                    }
                    }
                }
            }

            &:hover .nav-d {
                display: block;
            }
        }
    }
}
</style>
